<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50">
    <!-- 背景装饰 -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-40 -right-40 w-80 h-80 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob"></div>
      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000"></div>
      <div class="absolute top-40 left-40 w-80 h-80 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="container mx-auto px-8 py-10 pt-32 relative z-10">
      <!-- 页面标题 -->
      <div class="text-center mb-16">
        <h1 class="text-5xl font-bold mb-6 text-gray-900">学习指南</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          欢迎来到EduLiveLink学习平台！本指南将帮助您快速上手，充分利用我们的教育资源和服务。
        </p>
      </div>

      <!-- 学习指南内容 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
        <!-- 快速开始 -->
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8">
          <div class="flex items-center gap-4 mb-6">
            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center">
              <el-icon class="text-white text-2xl"><VideoPlay /></el-icon>
            </div>
            <div>
              <h3 class="text-2xl font-bold text-gray-900">快速开始</h3>
              <p class="text-gray-600">5分钟了解平台基本功能</p>
            </div>
          </div>
          <div class="space-y-4">
            <div class="flex items-center gap-3">
              <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold">1</div>
              <span class="text-gray-700">注册账号并完善个人信息</span>
            </div>
            <div class="flex items-center gap-3">
              <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold">2</div>
              <span class="text-gray-700">浏览课程目录，选择感兴趣的课程</span>
            </div>
            <div class="flex items-center gap-3">
              <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold">3</div>
              <span class="text-gray-700">加入班级，开始学习之旅</span>
            </div>
          </div>
        </div>

        <!-- 功能特色 -->
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8">
          <div class="flex items-center gap-4 mb-6">
            <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center">
              <el-icon class="text-white text-2xl"><Star /></el-icon>
            </div>
            <div>
              <h3 class="text-2xl font-bold text-gray-900">功能特色</h3>
              <p class="text-gray-600">探索平台的独特优势</p>
            </div>
          </div>
          <div class="space-y-3">
            <div class="flex items-center gap-3">
              <el-icon class="text-green-500"><Check /></el-icon>
              <span class="text-gray-700">实时直播互动教学</span>
            </div>
            <div class="flex items-center gap-3">
              <el-icon class="text-green-500"><Check /></el-icon>
              <span class="text-gray-700">个性化学习路径</span>
            </div>
            <div class="flex items-center gap-3">
              <el-icon class="text-green-500"><Check /></el-icon>
              <span class="text-gray-700">丰富的学习资源</span>
            </div>
            <div class="flex items-center gap-3">
              <el-icon class="text-green-500"><Check /></el-icon>
              <span class="text-gray-700">智能学习分析</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 详细指南 -->
      <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 mb-16">
        <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">详细使用指南</h3>
        
        <div class="space-y-8">
          <!-- 课程学习 -->
          <div class="border-l-4 border-blue-500 pl-6">
            <h4 class="text-xl font-semibold text-gray-900 mb-4">课程学习</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="space-y-3">
                <h5 class="font-medium text-gray-800">课前准备</h5>
                <ul class="space-y-2 text-gray-600 text-sm">
                  <li>• 确保网络连接稳定</li>
                  <li>• 准备学习用品和笔记</li>
                  <li>• 提前5分钟进入直播间</li>
                </ul>
              </div>
              <div class="space-y-3">
                <h5 class="font-medium text-gray-800">学习建议</h5>
                <ul class="space-y-2 text-gray-600 text-sm">
                  <li>• 积极参与课堂互动</li>
                  <li>• 及时完成课后作业</li>
                  <li>• 定期复习巩固知识</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 班级管理 -->
          <div class="border-l-4 border-green-500 pl-6">
            <h4 class="text-xl font-semibold text-gray-900 mb-4">班级管理</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="space-y-3">
                <h5 class="font-medium text-gray-800">加入班级</h5>
                <ul class="space-y-2 text-gray-600 text-sm">
                  <li>• 通过班级ID申请加入</li>
                  <li>• 使用邀请码快速加入</li>
                  <li>• 等待老师审核通过</li>
                </ul>
              </div>
              <div class="space-y-3">
                <h5 class="font-medium text-gray-800">班级活动</h5>
                <ul class="space-y-2 text-gray-600 text-sm">
                  <li>• 参与班级讨论</li>
                  <li>• 提交学习报告</li>
                  <li>• 与同学交流学习心得</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 资源获取 -->
          <div class="border-l-4 border-purple-500 pl-6">
            <h4 class="text-xl font-semibold text-gray-900 mb-4">资源获取</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="space-y-3">
                <h5 class="font-medium text-gray-800">学习资源</h5>
                <ul class="space-y-2 text-gray-600 text-sm">
                  <li>• 课程视频和文档</li>
                  <li>• 练习题和测试</li>
                  <li>• 学习资料下载</li>
                </ul>
              </div>
              <div class="space-y-3">
                <h5 class="font-medium text-gray-800">使用技巧</h5>
                <ul class="space-y-2 text-gray-600 text-sm">
                  <li>• 按需下载资源</li>
                  <li>• 建立个人知识库</li>
                  <li>• 定期整理学习资料</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 常见问题链接 -->
      <div class="text-center">
        <p class="text-gray-600 mb-4">还有疑问？查看我们的常见问题</p>
        <router-link to="/faq" class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition-colors">
          <el-icon><QuestionFilled /></el-icon>
          查看常见问题
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { VideoPlay, Star, Check, QuestionFilled } from '@element-plus/icons-vue'
</script>

<style scoped>
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
</style>



